<template>
  <div
    class="design-menu"
    v-if="config.show"
    :style="{ top: `${config.top}px`, left: `${config.left}px` }"
  >
    <div class="design-menu-item" @click="handleMenu('delete')">
      <span>删除</span>
    </div>
    <div class="design-menu-item" @click="handleMenu('group')">
      <span>{{ complex.name === "tool-combination" ? "解散" : "组合" }}</span>
    </div>
    <div class="design-menu-item" @click="handleMenu('copy')">
      <span>复制</span>
    </div>
    <div class="design-menu-line" />
    <div class="design-menu-item" @click="handleMenu('lock')">
      <span>{{ complex.lock ? "解锁" : "锁定" }}</span>
    </div>
    <!-- <div class="design-menu-item" @click="handleMenu('hidden')">
      <span>{{ complex.hidden ? "取消隐藏" : "隐藏" }}</span>
    </div> -->
    <div class="design-menu-item" @click="handleMenu('flex')">
      <span>{{ complex.flex ? "取消固定定位" : "固定定位" }}</span>
    </div>
    <div class="design-menu-line" />
    <div class="design-menu-item" @click="handleMenu('up')">
      <span>向上一层</span>
    </div>
    <div class="design-menu-item" @click="handleMenu('down')">
      <span>向下一层</span>
    </div>
    <div class="design-menu-line" />
    <div class="design-menu-item">
      <span>添加自定义组件</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
    }
  },
  computed: {
    complex() {
      return this.$store.state.design.selectComplex;
    }
  },
  methods: {
    handleMenu(type) {
      if (type === 'delete') {
        // console.log('删除')
        this.$store.dispatch('design/deleComplex', {
          id: this.complex.id
        }),
        this.$parent.selectComponents = null
      }

      if (type === 'copy') {
        // console.log('复制')
        this.$store.dispatch('design/copyComplex', this.complex)
      }

      if (type === 'lock') {
        // console.log('锁定/解锁')
        this.complex.lock = !this.complex.lock
        this.$store.dispatch('design/updateComplex', this.complex)
      }


      if (type === 'hidden') {
        // console.log('隐藏')
        this.complex.hidden = !this.complex.hidden
        this.$store.dispatch('design/updateComplex', this.complex)
      }

      if (type === 'flex') {
        // console.log('固定定位')
        this.complex.flex = !this.complex.flex
        this.$store.dispatch('design/updateComplex', this.complex)
      }

      if (type === 'up') {
        // console.log('向上一层')
        this.complex.z = ++this.complex.z;
        this.$store.dispatch('design/updateComplex', this.complex)
      }

      if (type === 'down') {
        // console.log('向下一层')
        this.complex.z = --this.complex.z;
        this.$store.dispatch('design/updateComplex', this.complex)
      }

      if (type === 'group') {
        // 合并组件时；先获取组件列表中全部选中的组件
        if (this.complex.name === 'tool-combination') {
          this.splitSource(this.complex)
          // console.log('解散')
        } else {
          // console.log('组合')
          const list = JSON.parse(JSON.stringify(this.$parent.complexList));
          const groupComplexs = list.filter(item => item.focused)
		  // console.log(groupComplexs)
          this.groupSource(groupComplexs)
        }
      }

      // 关闭右键菜单
      this.$store.dispatch('design/settingMenu', {
        show: false,
        top: 0,
        left: 0
      })
    },
    // 解散组件
    splitSource(complex) {
      // 拆分元素,获取组合元素的坐标值
      const childs = complex.config.childs;
      let startX = complex.x;
      let startY = complex.y;
      // 删除组合元素
      this.$store.dispatch('design/deleComplex', {
        id: this.complex.id
      })
      childs.forEach((item,index) => {
        // 计算组合后每个元素的新的 x、y 坐标并删除原组件
        item.x = item.x + startX;
        item.y = item.y + startY;
        item.id = `${new Date().valueOf()}#${index}`; // 元素ID
        this.$store.dispatch('design/addComplex', item)
      });
    },
    // 组件组合
    groupSource(childs) {
      let offsetXy = [];
      childs.forEach((item) => {
        // console.log(item)
        const offsetPostion = {
          x1: item.x,
          x2: item.x + item.w,
          y1: item.y,
          y2: item.y + item.h,
          width: item.w,
          height: item.h,
        };
        offsetXy.push(offsetPostion);
      });
      let maxX = Math.max.apply(
        Math,
        offsetXy.map(function (e) {
          return e.x2;
        })
      );
      let maxY = Math.max.apply(
        Math,
        offsetXy.map(function (e) {
          return e.y2;
        })
      );
      let minX = Math.min.apply(
        Math,
        offsetXy.map(function (e) {
          return e.x1;
        })
      );
      let minY = Math.min.apply(
        Math,
        offsetXy.map(function (e) {
          return e.y1;
        })
      );
      childs.forEach((item) => {
        // console.log(item)
        // 计算组合后每个元素的新的 top、left 并删除原组件
        item.x = item.x - minX;
        item.y = item.y - minY;
        this.$store.dispatch('design/deleComplex', {
          id: item.id
        })
      });
      let width = maxX - minX;
      let height = maxY - minY;

      // 创建新的组合元素;
      const nodes = {
        id: new Date().valueOf(),
        version: '0.0.1',
        count: 1,
        name: "tool-combination",
        title: "组合",
        lock: false, // 锁定
        hidden: false, // 隐藏
        flex: false, // 固定定位
        focused: false, // 是否选中
        resizable: true, // 是否可以调整大小
        w: width,
        h: height,
        x: minX,
        y: minY,
        z: 50,
        r: 0, // 旋转角度
        opacity: 1, // 透明度
        config: {
          label: '组合',
          childs: childs,
        }, // 组件属性
      };
      // console.log(nodes)
      this.$store.dispatch('design/addComplex', nodes)
    },
  }
}
</script>

<style lang="scss" scoped>
.design-menu {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 4px 0px;
  min-width: 200px;
  min-height: 100px;
  transform: translateY(-50%);
  background: #2a2e33;
  box-shadow: rgb(0 0 0 / 30%) 0px 2px 8px;
  border-radius: 4px;
  color: rgb(242, 244, 245);
  border: 1px solid rgb(69, 70, 71);
  cursor: pointer;
  z-index: 2077;
}

.design-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}

.design-menu-line {
  margin: 4px 0px;
  border-top: 1px solid rgb(69, 69, 70);
}

.design-menu-item span {
  font-size: 12px;
  padding-left: 16px;
  padding-right: 14px;
}

.design-menu-item:hover {
  color: #409eff;
  background: #2f353bb5;
}
</style>
